<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.几个注意点</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    几个注意点:
        1.关于组件名
            一个单词组成
                首字母小写: school
                首字母大写: School
            多个单词组成
                kebab-case命名: school-name
                camelCase命名: SchoolName(需要Vue脚手架支持)
            备注
                组件名尽可能回避HTML已有的标签
                可以使用name配置项指定组件在开发者工具中呈现的名字

        2.关于组件标签
            第一种写法
                <school></school>
            第二种写法
                <school/>
            备注:
                不用使用脚手架时,<school/>会导致后续组件不能渲染
        3.一个简写方式
            const school = Vue.extend(options) 可简写为:const school = options
-->
    <!--  准备好一个容器  -->
    <div id="root">
        {{msg}}
        <school></school>
    </div>
</body>

<script type="text/javascript">
    //第一步:创建school组件
    const school = Vue.extend({
        //extend里不能写el配置项,所有的组件被vm管理,由vm决定服务于哪个容器
        // el:"#root",
        template: `
          <div>
            <h2>学校名称:{{ schoolName }}</h2>
            <h2>学校地址:{{ address }}</h2>
          </div>
        `,
        data() {
            return {
                schoolName: "尚硅谷",
                address: "北京"
            }
        }
    })

    new Vue({
        el: "#root",
        data: {
            msg:"非单文件组件化"
        },
        //第二步: 注册组件(局部注册)
        components: {
            school
        }
    })
</script>
</html>